<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li class="collapse-item">
            <div class="tab">item1</div>
            <div class="content">
                <div>content1</div>
                <ul>
                    <li class="collapse-item-1">
                        <div class="tab">item1-1</div>
                        <div class="content">content1-1</div>
                    </li>
                </ul>
            </div>
        </li>
        <li class="collapse-item">
            <div class="tab">item2</div>
            <div class="content">content2</div>
        </li>
        <li class="collapse-item">
            <div class="tab">item3</div>
            <div class="content">content3</div>
        </li>
    </ul>
</body>
<!-- 点content2 3也会收起 -->
<script>
    console.log(document.querySelectorAll('.collapse-item>.tab'))
    document.querySelectorAll('.collapse-item>.tab').forEach(element => {
        element.addEventListener('click', function (e) {
            console.log(this)
            e.stopPropagation();
            this.parentNode.lastElementChild.style.display = getComputedStyle(this.parentNode.lastElementChild).getPropertyValue('display') == 'block' ? "none" : 'block'
        })
    });
    document.querySelectorAll('.collapse-item-1>.tab').forEach(element => {
        element.addEventListener('click', function (e) {
            e.stopPropagation();
            this.nextElementSibling.style.display = getComputedStyle(this.parentNode.lastElementChild).getPropertyValue('display') == 'block' ? "none" : 'block'
        })
    });
</script>

</html>